import './App.css';
import React from 'react';


function HelloFn(){

  const handler = (e)=>{
    console.log('点我',e);
  }
  return (
    <div>
      <h1>Hello World</h1>
      <button 
      onClick={handler}
      >点我</button>
    </div>
  )
}

class HiFn extends React.Component{
  render(){
    return <h1>Hi World</h1>
  }
}

function List(){
  const List = [ 
    {id:1,name:'zyx'},
    {id:2,name:'zyz'},
    {id:3,name:'crz'}
  ]

const handler= (item)=>{
    console.log(item.name);
    
  }
  return (
    <ul>
      {
        List.map((item,index)=>{
          return <li onClick={()=>handler(item)} key={item.id}>{item.name}</li>
        })
      }
    </ul>
  )
}


function App() {
  const name = 'zyx'
  const list = [
    {id:1,name:'zyx'},
    {id:2,name:'zyz'},
    {id:3,name:'crz'}
  ]
  const flag = false
  const styleObj={
    color:'blue'
  }
  const showTitle = true


  return(
    <div className="App">
      Hello World -- {name}

      {/* 循环渲染 */}
      <ul>
        {
          list.map((item,index)=>{
            return <li key={item.id}>{item.name}</li>
          })
        }
      </ul>
      {/* 条件渲染 */}
      <div className="flag">{flag ? 'react真好玩' : 'vue更有趣'}</div>
      <div className="flag">
        {
          flag ?
          (
            <h2>react真好玩</h2>
          ):
          (
            <h2>vue真好玩</h2>
          )
        }
        {/* 样式 */}
        <div className="box" style={{color:'red',backgroundColor:'yellow'}}>this is a box</div>
        <div style={styleObj}>this is a box</div>
        <div className="title">标题</div>
        <div className={showTitle ? 'title':''}>动态类名</div>
        
      </div>
        <div className="App">
          <HelloFn></HelloFn>
          <HiFn></HiFn>
          <List />
        </div>
    </div>
  )
}

export default App;